/**
 * 分项用能=>用能概况=>过去31天分项用能饼图
 */
import * as React from "react";

import ReactEcharts from "echarts-for-react";
import "./index.less";

export interface BieChartTo31Props {
  dataSouce: any;
}

export interface BieChartTo31State {}

class BieChartTo31 extends React.Component<
  BieChartTo31Props,
  BieChartTo31State
> {
  private dataSouce = null;
  private option: any = {};
  render() {
    let { option } = this;
    return (
      <>
        <div className="BieChartTo31">
          <div className="wy_card" style={{ marginTop: 12 }}>
            <div className="wy_card_tit">过去31天分项用能饼图</div>
            <div className="wy_card_body">
              <ReactEcharts
                option={option}
                notMerge={true}
                lazyUpdate={true}
                style={{ height: 327 }}
                // theme="dark"
                // theme="light"
              />
            </div>
          </div>
        </div>
      </>
    );
  }
  /**钩子函数 */
  componentDidMount() {
    this.init(this.props);
    if (this.dataSouce) {
      this.option = this.getWarnOption(this.dataSouce); //变更echarts
    }
  }
  //props拦截控制刷新
  shouldComponentUpdate(newProps, newState) {
    if (newProps.dataSouce !== this.props.dataSouce) {
      this.dataSouce = newProps.dataSouce;
      this.option = this.getWarnOption(this.dataSouce);
      this.forceUpdate();
    }
    return true;
  }
  init(props) {
    let { dataSouce } = props;
    this.dataSouce = dataSouce;
    this.forceUpdate();
  }
  //获取echart对象
  getWarnOption(dataScouse: any) {
    let dayList: string[] = dataScouse.dayList;
    let names: string[] = dataScouse.names;
    let dArr = names.map((item: any, index: number) => {
      return { value: dayList[index] ? dayList[index] : 0, name: item };
    });
    return {
      color: ["#FF7979", "#F6B646", "#AC9AF6", "#5AD8A6", "#32C5E9", "#1796FF"],
      title: {
        // text: "某站点用户访问来源",
        // subtext: "纯属虚构",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },

      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: "50%",
          data: dArr,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
  }
}

export default BieChartTo31;
